import { useRef } from "react"
import SyntaxHighlighter from '@/components/SyntaxHighlighter'

const code = `
  function UnControlled() {
    const inputRef = useRef()

    const handleSubmit = () => {
      alert('Input value: ' + inputRef.current.value)
    }

    return (
      <div>
        <input ref={inputRef} />
        <button onClick={handleSubmit}>Submit</button>
      </div>
    )
  }
`

function UnControlled() {
  const inputRef = useRef()

  const handleSubmit = () => {
    alert('Input value: ' + inputRef.current.value)
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>

      <SyntaxHighlighter children={code} />
    </div>
  )
}

export default UnControlled